<template>
	<div>
		<!-- 步骤一 -->
		<div class="mt-20px text-14px">
			<div class="flex items-center">
				<p
					class="flex items-center justify-center rounded-50% bg-#DDEEFF text-#114CEE text-16px w-24px h-24px mr-10px">
					1</p>
				<p class="text-18px">订单已生成</p>
			</div>
			<div class="ml-34px rounded-10px border-1px border-#E5E6EB border-solid p-20px w-600px mt-15px">
				<div class="flex items-center justify-between mb-10px">
					<p class="text-#86909C">法币金额</p>
					<div class="flex items-center">
						<p class="text-#F34E5F text-bold">￥100.00</p>
						<img src="/transaction/c2c/orderDetail/copy.svg" alt="" class="ml-10px w-16px h-16px">
					</div>
				</div>
				<div class="flex items-center justify-between mb-10px">
					<p class="text-#86909C">价格</p>
					<p class="text-#000000 text-bold">￥ 6.96</p>
				</div>
				<div class="flex items-center justify-between">
					<p class="text-#86909C">接收数量</p>
					<p class="text-#000000 text-bold">100.00 USDT</p>
				</div>
			</div>
		</div>
		<!-- 步骤二 -->
		<div class="mt-20px text-14px">
			<div class="flex items-center">
				<p
					class="flex items-center justify-center rounded-50% bg-#DDEEFF text-#114CEE text-16px w-24px h-24px mr-10px">
					2</p>
				<p class="text-18px">请确认付款来自夏天（买家姓名）</p>
			</div>
			<div class="ml-34px text-#86909C mt-10px">
				登录下方个人收款账户，确认已收到买家付款。
			</div>
			<div class="ml-34px rounded-10px border-1px border-#E5E6EB border-solid p-20px w-600px mt-15px">
				<div class="flex items-center mb-10px">
					<p class="w-4px h-14px" :style="{ backgroundColor: payMethod.color }"></p>
					<p class="text-18px text-#000000 ml-10px">{{ payMethod.name }}</p>
				</div>
				<div class="ml-14px flex items-center justify-between mb-10px">
					<p class="text-#86909C">姓名</p>
					<div class="flex items-center">
						<p>夏天</p>
						<img src="/transaction/c2c/orderDetail/copy.svg" alt="" class="ml-10px w-16px h-16px">
					</div>
				</div>
				<div class="ml-14px flex items-center justify-between mb-10px">
					<p class="text-#86909C">支付宝账号</p>
					<div class="flex items-center">
						<p>夏天</p>
						<img src="/transaction/c2c/orderDetail/copy.svg" alt="" class="ml-10px w-16px h-16px">
					</div>
				</div>
				<div class="ml-14px flex items-center justify-between mb-10px">
					<p class="text-#86909C">收款二维码</p>
					<el-select placeholder="查看二维码" style="width: 120px;" popper-class="order-detail-qrcode-select"
					>
						<el-option value="1">
							<template #default>
								<div class="flex items-center justify-center">
									<img src="/header/code2d.svg" class="w-160px h-160px">
								</div>
							</template>
						</el-option>
					</el-select>
				</div>
				<div class="border-1px border-solid border-#E5E6EB text-#86909C text-14px p-10px">
					买家姓名
				</div>
			</div>
		</div>
		<!-- 步骤三 -->
		<div class="mt-20px text-14px">
			<div class="flex items-center">
				<p
					class="flex items-center justify-center rounded-50% bg-#DDEEFF text-#114CEE text-16px w-24px h-24px mr-10px">
					3</p>
				<p class="text-18px">请确认已收到付款</p>
			</div>
			<div class="ml-34px mt-10px">
				<span class="text-#86909C">确认收款后，点击</span>
				<span class="text-#114CEE">“我已确认收款”</span>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="mt-50px ml-34px">
			<el-button type="primary" color="#ECECF0" style="width:320px;height:50px;font-size: 18px;margin-right: 20px;color:#C9CDD4;"
				@click="isGet=true" v-if="isGet != true">
				我已确认收款
			</el-button>
			<el-button type="primary" color="#114CEE" style="width:320px;height:50px;font-size: 18px;" @click="sure" v-else>
				我已确认收款
			</el-button>
		</div>
	</div>
</template>
<script lang="ts" setup>
interface IProps {
	orderId: any;
}

const props = defineProps<IProps>();

const emits = defineEmits(['sure']);

const payMethod = ref<any>({
	color: '#01A9F2',
	name: '支付宝'
});



const sure = () => {
	emits('sure');
}

// 是否已付款
const isGet = ref<boolean>(false);
</script>
<style lang="scss" scoped>
::v-deep .el-select__placeholder.is-transparent {
	color: #114CEE;
}

::v-deep .el-select__wrapper {
	border: none !important;
	box-shadow: none !important;
	padding: 0;
}
</style>
